<template>
	<view class="content"> 
		<view class="set_con"> 
			<view class="set_item fx-row-sb-c"  @click="showModal">
				<span>头像</span>
				<view class="fx-row-end " >   
					<image v-if="username.avatar!=null && username.avatar" class="head_img mr4" :src="username.avatar"  mode="aspectFill" lazy-load></image>
					<image v-else class="head_img mr4" src="@/static/userimg.jpg"  mode="aspectFill" lazy-load></image>  
					<uv-icon name="arrow-right" size="16"></uv-icon>
				</view> 
			</view>
			<avatar 
			    ref="cropper1"  selWidth="600upx" selHeight="600upx" expWidth="600upx" expHeight="600upx" @upload="myUpload"  canRotate='false'
			        avatarStyle="width: 200upx; height: 200upx; border-radius: 100%;">
			    </avatar>
			<cropper ref="cropper"  selWidth="660rpx" selHeight="660rpx"  @upload="myUpload"   canScale="true" avatarStyle="width:100vw;height:100vw;">
			</cropper>
			<view class="set_item fx-row-sb-c">
				<span>昵称</span>
				<view class="fx-row-end">
					<input class="name_inp" maxlength="15" type="text" v-model="username.name" placeholder="请输入您的昵称"   placeholder-style="font-size:28rpx;color:#9D9D9D" @input="changeName"/>
				</view>
			</view>
			<view class="set_item fx-row-sb-c">
				 <!-- @click="calendar" -->
				<span>出生日期</span>
				<view class="fx-row-end">
					<uni-datetime-picker type="date"  @change="maskClick">
						<!-- {{username.birthday?username.birthday:'请选择出生日期'}} -->
						<span v-if="username.birthday"  style="font-size: 28rpx">{{username.birthday}}</span>
						<span v-else style="font-size: 28rpx;color: #9D9D9D;">请选择出生日期</span>
					</uni-datetime-picker> 
					<uv-icon name="arrow-right" size="16"></uv-icon>
				</view>
			</view>
			
		</view>  
		<view class="select">
			<view class="select_btn" @click="setSave">保存</view>
		</view> 
	</view>
</template>

<script>
	import { userEdit,geturl,uploadFile ,getUser} from '@/utils/api.js'  
	import request from '@/utils/request.js' 
	import {  mapActions } from 'vuex'
	import config from "@/config.js" 
	import cropper from "@/components/lxiaoxiao-cropper.vue";
	import avatar from "@/components/yq-avatar.vue"; 
	import badgeMix from '@/common/mixins.js'  
	export default { 
		mixins: [badgeMix],
		components: {
			cropper,
			avatar 
		},
		data() {
			return {
				username:{
					'id':'',
					'avatar':'',
					'name':'',
					'birthday':''
				},
				url:'',
				urlKey:'',
				time:'',
				names:'',
				defaultDateMultiple:[],
				fileList1:[],
				userinfo:{}
			}
		},
		async onLoad(){  
			await getUser().then((res) => {
				console.log(res,"用户信息");  
				if(res.code == '200'){ 
					var users = res.result 
					this.userinfo = users
					this.username.avatar = res.result.avatar 
					this.urlKey = res.result.avatar 
					uni.setStorageSync('USERINFO', users)
					this.$store.commit('SET_USERINFO', users)   
				}
			})  
			console.log(this.userinfo ); 
			this.username.id = this.userinfo.id   
			this.username.name = this.userinfo.name 
			this.username.birthday = this.userinfo.birthday  
		},
		computed: {
			
		},
		methods: { 
			...mapActions(['outLogins','getUser','Logout']),   
			//上传返回图片
			async myUpload(rsp) {
				const self = this;   
				console.log(rsp);
				uni.showLoading({
					title: '上传中',
					icon: 'none'
				});  
				// #ifdef H5
				var url = await	this.parseBlob(rsp.path)
				await this.uploadQiniu(url).then((res) => { 
					self.urlKey = res.key
					self.username.avatar = rsp.path 
				})   
				// #endif 
				
			},
			// 日期
			calendar(){
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log('日历选择：',e)
				this.username.birthday = e[0]
			},
			// 日期选择
			maskClick(e){ 
				this.username.birthday = e
			},
			// 修改用户信息
			setSave(){ 
				 if(this.username.avatar=='' ||  this.username.avatar==null){
				 	return uni.showToast({
				 		title:'请上传头像！',
				 		icon:'none'
				 	})  
				 }
				if(this.username.name=='' ||  this.username.name==null){
					return uni.showToast({
						title:'请输入您的昵称！',
						icon:'none'
					})  
				}
				if(this.username.birthday=='' ||  this.username.birthday==null){
					return uni.showToast({
						title:'请选择出生日期！',
						icon:'none'
					})  
				} 
				const datas = {
					"id":this.username.id,
					"name":this.username.name,
					"birthday":this.username.birthday, 
					"avatar":this.urlKey
				}
				userEdit(datas).then((res) => {
					console.log(res);   
					if(res.code == '200'){ 
						// return
						uni.showToast({
							title:'设置成功！'
						})  
						setTimeout(()=>{
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页      
							uni.navigateBack({
								success:function(){
									// #ifdef H5
									// beforePage.getUsers(); 
									// #endif
									// #ifndef H5
									// beforePage.$vm.getUsers();
									// #endif 
								}
							})
						},1000)   
					}else{
						uni.showToast({title:res.message,icon:'none'}) 
					}
				})  
			},
			 
			// 上传头像
			showModal() {
				var self = this;   
				// #ifdef MP-WEIXIN
				this.$refs.cropper.fSelect() 
				// #endif
				// #ifdef H5
				this.$refs.cropper1.fSelect()  
				// #endif 
			},
			changeName(e){ 
				this.names = e.detail.value
			},
			
		}
	}
</script>

<style  lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	.uni-calendar--fixed{
		z-index: 998;
	}
	.uni-datetime-picker--btn{ 
		background-color: $uni-main !important;
	}
	.set_con{
		width: 690rpx;
		padding: 0 30rpx;
		margin: 20rpx 0;
		background-color: #fff;
		.set_item{
			padding:30rpx 0;
			border-bottom: 1rpx solid $uni-color-line;
			.name_inp{
				width: 500rpx;
				font-size: 28rpx;
				text-align: right;
			}
			.head_img{
				width:75rpx ;
				height: 75rpx;
				// border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
		}
		.set_item:last-child{
			border-bottom: 0;
		}
	} 
	.select{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 82rpx;
		padding: 22rpx 0;
		background-color: #fff;
		box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.04);
		z-index: 97; 
		.select_btn{
			width: 690rpx;
			height: 84rpx;
			margin: 0 30rpx;
			border-radius: 40rpx; 
			background: $uni-main;
			font-size: 32rpx;
			text-align: center; 
			color: #fff;
			line-height: 84rpx;
		}
	}
</style>
